<!DOCTYPE html>
<html class="ui-page-login">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>砍价清单</title>
    <link href="../../css/mui.css" rel="stylesheet"/>
    <link href="../../css/reset.css" rel="stylesheet"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="full-screen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="white">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="address=no">
    <script src="../../js/jquery.min.js"></script>
    <script type="text/javascript">
        var docEl = document.documentElement;
        var clientWidth = docEl.clientWidth;
        docEl.style.fontSize = (clientWidth / 10) + 'px';
        $(document).ready(function () {
            (function (doc, win) {
                var docEl = doc.documentElement,
                        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                        recalc = function () {
                            var clientWidth = docEl.clientWidth;
                            docEl.style.fontSize = (clientWidth / 10) + 'px';
                        };

                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);
                doc.addEventListener('DOMContentLoaded', recalc, false);
            })(document, window);
        });
    </script>
</head>

<body>
<header class="mui-bar mui-bar-nav user-heading">
    <a href="user.html" class="mui-icon back-btn mui-pull-left act-btn"></a>
    <h1 class="mui-title">砍价清单</h1>
</header>
<article class="mui-content cheap-box">
    <section class="cheap-table">
        <table><tbody></tbody></table>
    </section>
</article>
<nav class="mui-bar mui-bar-tab">
    <div class="mui-row">
        <div class="mui-col-sm-6 bar-check"><i class="icon-btn checkbox-btn active checkall"></i>全选</div>
        <div class="mui-col-sm-3"><a class="bargin-btn">去砍价</a></div>
        <div class="mui-col-sm-3"><a class="buy-btn">立即购买</a></div>
    </div>
</nav>
<script src="../../js/mui.min.js"></script>
<script src="../../js/main.js"></script>
</body>
<script>
    $(function () {
        if (isLogin()) {
            var user = getUserInfo();
            getlist(user);
            $('.cheap-box .heading .arrow').on('click', function () {
                $(this).parent().toggleClass('active');
            });
            $('body').on('click', '.icon-btn.checkbox-btn', function(){
                $(this).toggleClass('active');
                if( $(this).hasClass('checkall') ){
                    if( $(this).hasClass('active') ){
                        $('.icon-btn.checkbox-btn.btn-item').addClass('active');
                    }else{
                        $('.icon-btn.checkbox-btn.btn-item').removeClass('active');
                    }
                }else{
                    checked();
                }
            });
            $('.buy-btn').on('click', function () {
                var idlist = [];
                $('.icon-btn.checkbox-btn.btn-item.active').each(function(){
                    idlist.push($(this).data('id'));
                });
                if( !idlist.length ) {
                    mui.toast('请选择需要购买的商品');
                    return false;
                }
                var data = {
                    apiCode: '_order_001',
                    userToken: user.userToken,
                    type: 3,
                    card_ids: idlist.join(',')
                };
                http(data, function (responed) {
                    if (responed.error == 0) {
                        mui.toast('下单成功', 1000);
                        setTimeout(function(){
                            location.href = 'user.html';
                        }, 1000);
                    } else {
                        mui.alert(responed.info);
                    }
                });
            });
        }
        function checked(){
            if($('.icon-btn.checkbox-btn.btn-item.active').length < $('.icon-btn.checkbox-btn.btn-item').length){
                $('.icon-btn.checkbox-btn.checkall').removeClass('active');
            }else{
                $('.icon-btn.checkbox-btn.checkall').addClass('active');
            }
        }
        function getlist(user) {
            var data = {
                apiCode: '_card_list_001',
                userToken: user.userToken,
                type: 3
            };
            http(data, function (responed) {
                if (responed.error == 0) {
                    var html = '';
                    for (var i in responed.info) {
                        var item = responed.info[i];
                        html += '<tr> <td class="check-td"><i class="icon-btn checkbox-btn btn-item active" data-id="'+item.id+'"></i></td><td class="img-td"> <div class="img-box">' +
                                '<img src="'+item.img_path+'">' +
                                '</div> </td>' +
                                '<td class="desc-box">' +
                                '<h5>'+item.title+'</h5>' +
                                '<div class="price">￥'+item.price+'<span class="mui-pull-right kj-to">已砍￥'+item.bargained+'</span>' +
                                '</div> </td> </tr>';
                    }
                    $('.cheap-table table tbody').html(html);
                } else {
                    mui.alert(responed.info);
                }
            });
        }
    });
</script>
</html>